
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_study_app/page/branch_statistics_page.dart';
import 'package:flutter_study_app/widget/my_underline_tab_indicator.dart';
import 'package:flutter_study_app/widget/common_sliver_header_delegate.dart';
import 'package:flutter_study_app/widget/sticky_tab_bar_delegate.dart';

class VisitStatisticsPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _VisitStatisticsState();

}

class _VisitStatisticsState extends State<VisitStatisticsPage> with SingleTickerProviderStateMixin{
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController=TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return ExtendedNestedScrollView(
        headerSliverBuilder:(BuildContext context,bool innerBoxIsScrolled){
          return <Widget>[
            // SliverAppBar(
            //   leading: Container(),
            //   expandedHeight: 200.0,
            //   pinned: false,
            //   floating: false,
            //   flexibleSpace: FlexibleSpaceBar(
            //     background: Container(
            //       decoration: BoxDecoration(
            //         gradient: LinearGradient(
            //           begin: Alignment.topCenter,
            //           end: Alignment.bottomCenter,
            //           colors: [
            //             Color(0xFF00C39F),
            //             Color(0xFF00C18E),
            //           ],
            //         ),
            //       ),
            //       child: Column(
            //         children: [
            //           Container(
            //             height: 40,
            //             child: Row(
            //               children: [
            //                 Spacer(),
            //                 Text(
            //                   '2021年09月',
            //                   style: TextStyle(color: Colors.white,fontSize: 16),
            //                 ),
            //                 Spacer(),
            //               ],
            //             ),
            //           ),
            //           Stack(
            //             children: [
            //               Container(
            //                 margin: EdgeInsets.only(left: 10,right: 10),
            //                 child: Image.asset('assets/images/bg_top_1.png'),
            //               ),
            //               Container(
            //                 padding: EdgeInsets.all(10),
            //                 margin: EdgeInsets.only(top:12,left: 20,right: 20),
            //                 decoration: BoxDecoration(
            //                     color: Colors.white,
            //                     borderRadius: BorderRadius.only(topLeft: Radius.circular(4),topRight: Radius.circular(4))
            //                 ),
            //                 child: Column(
            //                   children: [
            //                     Row(
            //                       children: [
            //                         Expanded(
            //                           child: Column(
            //                             children: [
            //                               Row(
            //                                 children: [
            //                                   Text('走访数',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('+234',style: TextStyle(color: Color(0xffF1622A),fontSize: 12),),
            //                                 ],
            //                               ),
            //                               SizedBox(height: 3,),
            //                               Row(
            //                                 children: [
            //                                   Text('3501',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('+72%',style: TextStyle(color: Color(0xffF1622A),fontSize: 12),),
            //                                 ],
            //                               ),
            //                             ],
            //                           ),
            //                         ),
            //                         Container(
            //                           width: 1,
            //                           height: 40,
            //                           margin: EdgeInsets.only(left: 10,right: 10),
            //                           color: Color(0xffdddddd),
            //                         ),
            //                         Expanded(
            //                           child: Column(
            //                             children: [
            //                               Row(
            //                                 children: [
            //                                   Text('商机获得 (户)',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('+0',style: TextStyle(color: Color(0xff333333),fontSize: 12),),
            //                                 ],
            //                               ),
            //                               SizedBox(height: 3,),
            //                               Row(
            //                                 children: [
            //                                   Text('3501',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('+0',style: TextStyle(color: Color(0xff333333),fontSize: 12),),
            //                                 ],
            //                               ),
            //                             ],
            //                           ),
            //                         ),
            //                       ],
            //                     ),
            //                     SizedBox(height: 10,),
            //                     Row(
            //                       children: [
            //                         Expanded(
            //                           child: Column(
            //                             children: [
            //                               Row(
            //                                 children: [
            //                                   Text('商机成功 (笔)',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('-234',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
            //                                 ],
            //                               ),
            //                               SizedBox(height: 3,),
            //                               Row(
            //                                 children: [
            //                                   Text('3501',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('-72%',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
            //                                 ],
            //                               ),
            //                             ],
            //                           ),
            //                         ),
            //                         Container(
            //                           width: 1,
            //                           height: 40,
            //                           margin: EdgeInsets.only(left: 10,right: 10),
            //                           color: Color(0xffdddddd),
            //                         ),
            //                         Expanded(
            //                           child: Column(
            //                             children: [
            //                               Row(
            //                                 children: [
            //                                   Text('成功放款(万元)',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('-234',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
            //                                 ],
            //                               ),
            //                               SizedBox(height: 3,),
            //                               Row(
            //                                 children: [
            //                                   Text('123456789',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
            //                                   Spacer(),
            //                                   Text('-72%',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
            //                                 ],
            //                               ),
            //                             ],
            //                           ),
            //                         ),
            //                       ],
            //                     ),
            //                     SizedBox(height: 10,),
            //                     Container(
            //                       alignment: Alignment.topLeft,
            //                       child: Text('*百分比值是与上月环比结果。',style: TextStyle(fontSize: 11,color: Color(0xff999999)),textAlign: TextAlign.left,),
            //                     ),
            //                   ],
            //                 ),
            //               )
            //             ],
            //           )
            //         ],
            //       ),
            //     ),
            //   ),
            // ),
            SliverPersistentHeader(
                delegate: CommonSliverHeaderDelegate(
                  isLucency:true,
                  child: PreferredSize(
                    preferredSize: Size.fromHeight(200),
                    child: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [
                            Color(0xFF00C39F),
                            Color(0xFF00C18E),
                          ],
                        ),
                      ),
                      child: Column(
                        children: [
                          Container(
                            height: 40,
                            child: Row(
                              children: [
                                Spacer(),
                                Text(
                                  '2021年09月',
                                  style: TextStyle(color: Colors.white,fontSize: 16),
                                ),
                                Spacer(),
                              ],
                            ),
                          ),
                          Stack(
                            children: [
                              Container(
                                margin: EdgeInsets.only(left: 10,right: 10),
                                child: Image.asset('assets/images/bg_top_1.png'),
                              ),
                              Container(
                                padding: EdgeInsets.all(10),
                                margin: EdgeInsets.only(top:12,left: 20,right: 20),
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(topLeft: Radius.circular(4),topRight: Radius.circular(4))
                                ),
                                child: Column(
                                  children: [
                                    Row(
                                      children: [
                                        Expanded(
                                          child: Column(
                                            children: [
                                              Row(
                                                children: [
                                                  Text('走访数',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('+234',style: TextStyle(color: Color(0xffF1622A),fontSize: 12),),
                                                ],
                                              ),
                                              SizedBox(height: 3,),
                                              Row(
                                                children: [
                                                  Text('3501',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('+72%',style: TextStyle(color: Color(0xffF1622A),fontSize: 12),),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                        Container(
                                          width: 1,
                                          height: 40,
                                          margin: EdgeInsets.only(left: 10,right: 10),
                                          color: Color(0xffdddddd),
                                        ),
                                        Expanded(
                                          child: Column(
                                            children: [
                                              Row(
                                                children: [
                                                  Text('商机获得 (户)',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('+0',style: TextStyle(color: Color(0xff333333),fontSize: 12),),
                                                ],
                                              ),
                                              SizedBox(height: 3,),
                                              Row(
                                                children: [
                                                  Text('3501',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('+0',style: TextStyle(color: Color(0xff333333),fontSize: 12),),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                    SizedBox(height: 10,),
                                    Row(
                                      children: [
                                        Expanded(
                                          child: Column(
                                            children: [
                                              Row(
                                                children: [
                                                  Text('商机成功 (笔)',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('-234',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
                                                ],
                                              ),
                                              SizedBox(height: 3,),
                                              Row(
                                                children: [
                                                  Text('3501',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('-72%',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                        Container(
                                          width: 1,
                                          height: 40,
                                          margin: EdgeInsets.only(left: 10,right: 10),
                                          color: Color(0xffdddddd),
                                        ),
                                        Expanded(
                                          child: Column(
                                            children: [
                                              Row(
                                                children: [
                                                  Text('成功放款(万元)',style: TextStyle(color: Color(0xff333333),fontSize: 12,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('-234',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
                                                ],
                                              ),
                                              SizedBox(height: 3,),
                                              Row(
                                                children: [
                                                  Text('123456789',style: TextStyle(color: Color(0xff333333),fontSize: 14,fontWeight: FontWeight.bold),),
                                                  Spacer(),
                                                  Text('-72%',style: TextStyle(color: Color(0xff009669),fontSize: 12),),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                    SizedBox(height: 10,),
                                    Container(
                                      alignment: Alignment.topLeft,
                                      child: Text('*百分比值是与上月环比结果。',style: TextStyle(fontSize: 11,color: Color(0xff999999)),textAlign: TextAlign.left,),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          )
                        ],
                      ),
                    ),
                  )
                )),
            SliverPersistentHeader(
              pinned: true,
              floating: true,
              delegate: StickyTabBarDelegate(
              child: TabBar(
                controller: _tabController,
                labelColor: Color(0xff009669),
                labelStyle: TextStyle(fontSize: 14),
                unselectedLabelColor: Color(0xff333333),
                unselectedLabelStyle: TextStyle(fontSize: 14),
                indicator: MyUnderlineTabIndicator(borderSide: BorderSide(width: 2.0,color: Color(0xff009669)),needWidth: 60),
                tabs: [
                  Tab(text: '分行统计'),
                  Tab(text: '支行统计'),
                  Tab(text: '项目统计'),
                  Tab(text: '小组统计'),
                ],
              ),
            ))
          ];
        },
        pinnedHeaderSliverHeightBuilder: (){
          return statusBarHeight+45;
        },
        onlyOneScrollInBody: false,
        body: SafeArea(
          child: TabBarView(
            controller: _tabController,
            children: [
              BranchStatisticsPage(),
              Center(child: Text('Page02'),),
              Center(child: Text('Page03'),),
              Center(child: Text('Page04'),)
            ],
          ),),
        );
  }

}